<template>
  <div class="gauge-double-wrapper" :style="containerStyle">
    <v-chart ref="chartRef" :option="chartOption" :style="chartStyle" autoresize />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { use } from 'echarts/core';
import * as echarts from 'echarts';
import { CanvasRenderer } from 'echarts/renderers';
import { GaugeChart } from 'echarts/charts';
import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components';
import VChart from 'vue-echarts';
import { useAutoDataBinding } from '@/composables/use-data-binding';

// 注册ECharts组件
use([CanvasRenderer, GaugeChart, TitleComponent, TooltipComponent, LegendComponent]);

// Props定义
interface Props {
  value?: number;
  name?: string;
  precision?: number;
  mainColor?: string;
  secondaryColor?: string;
  pointerColor?: string;
  anchorColor?: string;
  dataBinding?: any;
}

const props = withDefaults(defineProps<Props>(), {
  value: 58.46,
  name: 'PLP',
  precision: 1,
  mainColor: '#f00',
  secondaryColor: '#000',
  pointerColor: '#000',
  anchorColor: '#000'
});

// 图表引用
const chartRef = ref<InstanceType<typeof VChart>>();

// 响应式属性（用于数据绑定）
const componentProps = computed(() => ({
  value: props.value,
  name: props.name,
  precision: props.precision,
  mainColor: props.mainColor,
  secondaryColor: props.secondaryColor,
  pointerColor: props.pointerColor,
  anchorColor: props.anchorColor
}));

// 数据绑定
const dataBinding = useAutoDataBinding(
  props.dataBinding?.enabled ? props.dataBinding : null,
  componentProps
);

// 样式计算
const containerStyle = computed(() => ({
  width: '100%',
  height: '100%',
  minHeight: '400px'
}));

const chartStyle = computed(() => ({
  width: '100%',
  height: '100%'
}));

// 双圈切换仪表盘配置
const chartOption = computed(() => {
  const value = componentProps.value.value;
  const name = componentProps.value.name;
  const precision = componentProps.value.precision;
  const mainColor = componentProps.value.mainColor;
  const secondaryColor = componentProps.value.secondaryColor;
  const pointerColor = componentProps.value.pointerColor;
  const anchorColor = componentProps.value.anchorColor;

  return {
    series: [
      {
        type: 'gauge',
        min: 0,
        max: 100,
        splitNumber: 10,
        radius: '80%',
        axisLine: {
          lineStyle: {
            color: [[1, mainColor]],
            width: 3
          }
        },
        splitLine: {
          distance: -18,
          length: 18,
          lineStyle: {
            color: mainColor
          }
        },
        axisTick: {
          distance: -12,
          length: 10,
          lineStyle: {
            color: mainColor
          }
        },
        axisLabel: {
          distance: -50,
          color: mainColor,
          fontSize: 25
        },
        anchor: {
          show: true,
          size: 20,
          itemStyle: {
            borderColor: anchorColor,
            borderWidth: 2
          }
        },
        pointer: {
          offsetCenter: [0, '10%'],
          icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
          length: '115%',
          itemStyle: {
            color: pointerColor
          }
        },
        detail: {
          valueAnimation: true,
          precision: precision
        },
        title: {
          offsetCenter: [0, '-50%']
        },
        data: [
          {
            value: value,
            name: name
          }
        ]
      },
      {
        type: 'gauge',
        min: 0,
        max: 60,
        splitNumber: 6,
        axisLine: {
          lineStyle: {
            color: [[1, secondaryColor]],
            width: 3
          }
        },
        splitLine: {
          distance: -3,
          length: 18,
          lineStyle: {
            color: secondaryColor
          }
        },
        axisTick: {
          distance: 0,
          length: 10,
          lineStyle: {
            color: secondaryColor
          }
        },
        axisLabel: {
          distance: 10,
          fontSize: 25,
          color: secondaryColor
        },
        pointer: {
          show: false
        },
        title: {
          show: false
        },
        anchor: {
          show: true,
          size: 14,
          itemStyle: {
            color: anchorColor
          }
        }
      }
    ]
  };
});

onMounted(() => {
  // 确保图表可以正确响应尺寸变化
  if (chartRef.value) {
    // 延迟调用resize确保图表正确渲染
    setTimeout(() => {
      chartRef.value?.resize();
    }, 100);
  }
});
</script>

<style scoped>
.gauge-double-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.gauge-double-wrapper > div {
  width: 100% !important;
  height: 100% !important;
}
</style>
